<template>
		<!-- 定义了一个training盒子，为了不让其他页面受全局的影响 -->
		<div class="training" style="height:100vh ;background-color: #F1F3F9;">
			<!-- 顶部图片以及分享返回 -->
			<div class="top" >
				<meta name="referrer" content="never"/>
				<video  :src="spLj"  controls="controls" style="width= 100%; height=100%; object-fit: fill" ></video>
				<p @click="onClickLeft" class="fa fa-arrow-left"></p>
				<i class="fa fa-share" @click="showShare = true"></i>
				<share-sheet
					v-model:show="showShare"
					title="立即分享给好友"
					:options="options"
				/>
			</div>
			<!-- 下方所有内容 -->
			<div class="bottom">
				<!-- 三个主要标签 -->
				<div class="tab">
					<tabs v-model:active="active">
					<!-- 课程介绍所有内容 -->
						<tab title="课程介绍"  >
							<div class="kcjs">
							<p class="top2"> <h4>{{newKcjj.name}}</h4> <span > <i class="fa fa-reply"  @click="showShare = true"></i> </span></p>
							<p class="top3"><rate v-model="value" allow-half /> <span>{{value}}</span>
							<span class="topSpan">33807人学过</span>
							</p>
							<p class="top4"> <span class="fa fa-user"> 主讲:{{newKcjj.teacher}}</span> <span class="fa fa-play"> 视频:{{length}}集</span> <span class="fa fa-list"> 习题:0题</span> </p>
							</div>
							<div class="kcjj">
								<h4>课程简介</h4>
								<p>{{newKcjj.Introduction}}</p>
							</div>
						</tab>
					<!-- 视频列表内容 -->
						<tab title="视频列表"
							><div class="tab2">
								<p class="left">
									{{length}}集<span class="lSpan">(已全部更新)</span>
									<span class="rSpan">
										<i
											class="fa fa-share"
											@click="showShare = true"
										></i>
									</span>
								</p>
								<collapse v-model="activeName" accordion>
									<collapse-item
										v-for="item in newSplb"
										:title="item.name"
										:name="item.id"
										@click="clickSp(item.id)"
								>
										<div class="pCollapse">
											<p>
												<span>1. </span>
												<span class="span1"></span>
											</p>
											<p>
												<span>准确率：0%</span
												><span class="fa fa-list">
													习题：
													<span class="bS">0</span>
													/0</span
												><span
													>积分：<span class="bS"
														>0</span
													>/0</span
												>
											</p>
										</div>
									</collapse-item>
								</collapse>
							</div></tab>
					<!-- 提问内容 -->
						<tab title="提问">
						<notice-bar
						left-icon="volume-o"
						:scrollable="true"
						text="温馨提示：灌水、带有反动的言论将会被删除、严重者封号处理,	谢谢配合!"/>
						<div class="tiWen">
							<div class="xz">选择视频</div>
							<!-- 一个假的页码，传index用来对接接口的page值 -->
							<div class="page">
								<p v-for="i,index in newSplb" :key="index" class="a"   @click="foo(index)" :class="{box:boxIndex===index}" >0{{index+1}}</p></div>
							<!-- 评论区域 -->
								<p class="xian"></p>
									<div class="pl-top">
										<notice-bar scrollable :text="'超级课堂全新的学习方法-'+newKcjj.name" class="pl-top-left" />
							<!-- 评论是调用接口的数据，不是死的 -->
										<p class="pl-top-right">评论 (10)</p>
									</div>
								<div class="pl" v-for="item in pingLun.records">
							<!-- left为头像区 -->
									<div class="pl-left">
									<div class="pl-left-tx" >
									<img :src="item.avatar?dalImg(item.avatar):'https://tse4-mm.cn.bing.net/th/id/OIP-C.zfGhSXi_JzJY5FOuRslmFgHaG4?w=181&h=180&c=7&r=0&o=5&dpr=1.25&pid=1.7'" alt="图片">
									</div>
									</div>
							<!-- right为右侧评论区 -->
									<div class="pl-right" >
										<div class="pl-right-quan">
										<p class="pl-right-p1"><span class="pl-right-span1">{{item.nickname}}</span><span  class="pl-right-span1">{{item.createTime}}</span></p>
										<p class="pl-right-p2">等级19: 王者: 羽化成仙</p>
										<p class="pl-right-p3">{{item.text}}</p>
									</div>
										<p class="pl-right-p4"><i class="fa fa-comment-o aaa"></i>{{item.replyNum}}<i class="fa fa-thumbs-o-up bbb"></i>99{{item.lickNum}}</p>
										<p class="xian2"></p>
									</div>
								</div>
						</div>
						<!-- 底部固定发布评论区域 -->
						<div class="gdBottom">
							<p class="fa fa-meh-o"></p>
							<input type="text" placeholder="我也来说两句 (最少五个字)" v-model="text">
							<p class="gdBottom-right" @click="clickHandle">发送</p>
						</div>
						</tab>
					</tabs>
				</div>
			</div>
		</div>
</template>

<script setup>
import { ref } from "vue";
import { Collapse, CollapseItem, ShareSheet, Tab, Tabs,Rate, NoticeBar } from "vant";
import { useRouter } from "vue-router";
import "font-awesome/css/font-awesome.min.css";
import { dalImg } from "../Utils/tools";
import {testAPI,localCommentAPI,localWriteAPI,localComboAPI,localDataAPI} from "../API/jiang";
import {get} from "../utils/request";
import { useRoute } from "vue-router";

// 第一层id
let route = useRoute();
const id = route.query.id;
const idTwo= route.query.idTwo
const active = ref(0);
// 查看课程视频总数方法
// import axios from "../utils/request"
// get("/api/course/courseDetail?id=9").then((res)=>console.log(res.data));
const shangPin = ref([]);
testAPI(9).then((res)=>{shangPin.value=res.data;});

// 这是套餐树第一层
const newSp=ref([])
// 这是套参数第二层
const newKcjj=ref([])
// 套参数第三层
const newSplb = ref([])
//数量
const length= ref("")
//套参树接口
localComboAPI(id).then((res)=>{newSp.value=(res.data.find((item)=>item.id== id));newKcjj.value=newSp.value.children.find((item)=>item.id==idTwo);newSplb.value=newKcjj.value.children;length.value=newSplb.value.length;spLj.value=newSplb.value[0].video;})
//初始化视频为第一个视频
const spLj = ref("")

// 根据id选择视频
const clickSp=(id)=>{
spLj.value=newSplb.value.find((item)=>item.id==id).video;
console.log(spLj.value);
}

//评论input框的值
const text = ref("")
//用户的id
const uid = ref(1)
localDataAPI().then((res)=>{uid.value=res.data.id;})

//查看评论方法
// 这是点击页码，后续可传page与index相同
const boxIndex=ref(0);
const page = ref("")
const foo=(index)=>{
	boxIndex.value=index;
	page.value=boxIndex.value+1;

	localCommentAPI(id,1,page.value).then((res)=>{pingLun.value=res.data;console.log(pingLun.value);})
}
//查看评论方法
const pingLun = ref([])
localCommentAPI(id,1,page.value).then((res)=>{pingLun.value=res.data;})
// 封装一个函数用来起到发布评论后重新查询评论刷新的作用
const texttext=()=>localCommentAPI(id,1,1).then((res)=>{pingLun.value=res.data;})

//发布评论

// id为视频id,uid为用户id,1为判断是否为一级评论,text为input的值

const clickHandle=()=>{
	if(text.value){
		localWriteAPI(id,uid.value,1,text.value).then((res)=>{console.log(text.value);texttext()});
		text.value="";
	}else{
		alert("评论内容为空")
	}
}

const value = ref(4.5);
const activeName = ref();

//返回
const router = useRouter();
const onClickLeft = () => {
	router.go(-1);
};

const showShare = ref(false);
const options = [
	{ name: "微信", icon: "wechat" },
	{ name: "微博", icon: "weibo" },
	{ name: "复制链接", icon: "link" },
	{ name: "分享海报", icon: "poster" },
	{ name: "二维码", icon: "qrcode" },
];
</script>
<style >
.training video{
	width: 100%;
	height: 100%;
}
.training	.aaa{
	font-size: 0.875rem;
	margin-right: 0.3125rem;
}
.training	.bbb{
	font-size: 0.875rem;
	margin: 0 0.3125rem;
}
.training	.fa-meh-o{
	width: 10%;
	height: 100%;
	line-height: 2.3125rem;
	text-align: center;
	font-size: 1.375rem;
}
.training	.gdBottom{
	width: 100%;
	position: fixed;
	bottom: 0;
	height: 2.3125rem;
	background-color: #fff;
	border-top: 0.125rem solid rgba(128, 128, 128, 0.225);
	display: flex;
	justify-content: space-around;
}
.training	.gdBottom-right{
	width: 15%;
	line-height:2.3125rem;
	color: var(--main-color);
	text-align: center;
}
.training	.gdBottom input{
	width: 90%;
	background-color:rgba(128, 128, 128, 0.225) ;
	height: 70%;
	border: none;
	margin: auto;
	border-radius: 6.25rem;
	text-indent: 0.75rem;
	font-size: 0.8125rem;
}
.training	.pl-right-quan{
	height: 65%;
	display: flex;
	justify-content: space-around;
	flex-direction: column;
}
.training	.xian2{
	width: 100%;
	height: 0.0625rem;
	background-color: rgba(128, 128, 128, 0.547);
	position: absolute;
	bottom: -0.0625rem;
}
.training	.pl-right-p1{
	width: 100%;
	display: flex;
	justify-content: space-between;
}
.training	.pl-right-span1{
	color: gray;
	margin-right: 0.9375rem;
	font-size: 0.8125rem;
}
.training	.pl-right-span2{
	color: gray;
	font-size: 0.75rem;
}
.training	.pl-right-p2{
	font-size: 0.75rem;
	color: gray;
}
.training	.pl-right-p3{
	font-size: 0.8125rem;
}
.training	.pl-right-p4{
	color: gray;
	font-size: 0.75rem;
	padding-top: 0.4375rem;
}
.training	.pl{
	width: 100%;
	height: 6.25rem;
	display: flex;
	margin-top: 0.3125rem;
}
.training	.pl-left{
	width:3.125rem;
	height: 6.25rem;
}
.training	.pl-left-tx{
	width: 100%;
	height: 6.25rem;
	display: flex;
	justify-content: center;
}
.training	.pl-left-tx img{
	width: 1.875rem;
	height: 1.875rem;
	border-radius: 10000px;
}
.training	.pl-right{
	height: 6.25rem;
	flex: 1;
	box-sizing: border-box;
	position: relative;
}
.training	.pl-top-right{
	width: 50%;
	height: 2.1875rem;
	float: right;
	font-size: 0.625rem;
	color: gray;
	line-height: 2.1875rem;
}
.training	.pl-top-left{
	height: 2.1875rem;
	width: 45%;
	background-color: #fff;
	color: var(--main-color);
}
.training	.pl-top{
	display: flex;
}
.training	.xian{
	height: 0.4375rem;
	width: 100%;
	background-color: rgba(128, 128, 128, 0.218);
	margin-top: 0.625rem;
}
.training	.fenGe{
	width: 100%;
	height: 0.375rem;
	position: absolute;
	top: 5.3125rem;
	background-color: rgba(128, 128, 128, 0.218);
}
.training	.box{
	background-color: var(--main-color) !important;
}
.training	.van-cell__title{
	font-size: 0.75rem;
}
.training	.tests{
	margin-top: 1.875rem;
}

.training	.page{
	width: 90%;
	margin: auto;
	display: flex;
}

.training	.page .a{
	height:1.5625rem;
	width: 2.1875rem;
	background-color: rgba(128, 128, 128, 0.218);
	margin: 0 0.625rem 0 0;
	text-align: center;
	line-height: 1.5625rem;
	font-size: 0.875rem;
	border-radius: 0.4375rem;
	color: #fff;

}
.training	.xz{
	font-size: 0.8125rem;
	width: 90%;
	margin:  auto;
	padding: 0.9375rem 0;
}
.training	.tiWen{
	width: 100%;
	height: 100vh;
	background-color: #fff;
	position: relative;
	overflow: auto;
}
.training .van-tab--card{
	border: none;
	width:5% ;
}
.training .van-tabs__nav--card{
	border: none;
}
.training	.top2 span{
	display: block;
	height: 1.25rem;
	width: 1.25rem;
	background-color: var(--main-color);
	line-height: 1.25rem;
	color: #fff;
}
.training .topSpan{
	margin-left: 1.25rem;
	font-size: 0.75rem;
}
.training .kcjs{
	height: 6.875rem;
	margin-top: 0.3125rem;
	background-color: #fff;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding-bottom: 0.5rem;
}
.training .kcjj{
margin-top: 0.4375rem;
background-color: #fff;
}
.training .kcjj h4{
	width: 92%;
   margin: auto;
}
.training .kcjj p{
	width: 92%;
	margin: auto;
	font-size: 0.75rem;
	color: gray;
	padding:  0.8125rem 0;
}
.training .top3{
	width: 93%;
	margin: auto;
}
.training .top4{
	width: 70%;
	margin-left: 4%;
	display: flex;
	justify-content: space-between;
	padding: 0.4375rem 0;
}
.training .top4 span{
	font-size: 0.75rem;
}
.training .top3 span{
	font-size: 0.75rem;
}
.training .kcjs .top2{
	width: 93%;
	margin: auto;
	display: flex;
	justify-content: space-between;
}
.training .van-collapse-item__content {
	padding: 0;
}
.training .bS {
	color: var(--main-color);
}
.training .span1 {
	height: 0.375rem;
	width: 0.375rem;
	border: 0.0625rem solid black;
	transform: rotateZ(45deg);
	border-top: none;
	border-left: none;
}
.training .pCollapse {
	font-size: 0.75rem;
	height: 5rem;
	display: flex;
	justify-content: space-around;
	flex-direction: column;
	background-color: #F1F3F9;
}
.training .pCollapse p {
	color: black;
	display: flex;
	justify-content: space-between;
	width: 93%;
	margin: auto;
}
.training .lSpan {
	color: gray;
	padding-left: 0.9375rem;
	font-size: 0.8125rem;
}
.training .rSpan .fa-share:before {
	display: block;
	position: absolute;
	right: 0.625rem;
	top: 0.9375rem;
	font-size: 0.75rem;
	color: #fff;
	background-color: var(--main-color);
}
.training .left {
	padding: 0.9375rem 0.9375rem;
	position: relative;
	background-color: #fff;
	margin: 0.125rem 0;
	font-size: 0.875rem;
}
.training .tab {
	height: 3.75rem;
	/* width: 50%; */
	margin: auto;
}
.training .tab2 {
	width: 100%;
}
.training .fa-share:before {
	position: absolute;
	right: 0.625rem;
	background-color: #fff;
	font-size: 0.75rem;
	padding: 0.3125rem;
	top: 1.25rem;
}
.training .fa-arrow-left:before {
	color: #fff;
	position: absolute;
	top: 0.9375rem;
	left: 0.625rem;
	font-size: 1.375rem;
}

.training .top {
	height: 18rem;
	overflow: hidden;
}
.training .top img {
	height: 100%;
	width: 100%;
}
.training .van-notice-bar__wrap{
	font-size: 0.75rem;
}
</style>
